<template lang="pug">
  .page
    .resume-detail
      .top-info.clearfix
        .pull-left.font-20
          | 应聘岗位：
          span {{positionName}}        
        .pull-right.font-14 {{creatortime}}投递     
      .re-sec.re-sec-1
        .user-img
          img(:src="photoImg")
        .sec-container
          .basic-info
            .font-30 {{detailInfo && detailInfo.resume_member_name}}
            .debris
              span {{detailInfo && detailInfo.resume_member_sex == 17 ? '女' : '男'}}
              span {{detailInfo && detailInfo.resume_age}}岁
              span {{educationArr[detailInfo.resume_education]}}
              span {{detailInfo && detailInfo.resume_live_address}}
              span {{workAgeArr[detailInfo.resume_work_age]}}
              span {{detailInfo && detailInfo.resume_past_work}}
            .phone
              Icon.font-20(type="ios-call")
              span.font-16 {{detailInfo && detailInfo.resume_member_tel}}
            .tag(v-if="labelList.length>0")
              span(v-for="(item,index) in labelList" :class="'style-'+ (index%4 + 1)") {{item}}
          ul
            li
              .name 求职意向：
              .content {{detailInfo && detailInfo.resume_job_intension?detailInfo.resume_job_intension:'未填写'}}
            li
              .name 期望地点：
              .content {{detailInfo && detailInfo.resume_expect_work_address?detailInfo.resume_expect_work_address:'未填写'}}
            li
              .name 期望薪资：
              .content {{expectPayArr[detailInfo.resume_expect_pay]?expectPayArr[detailInfo.resume_expect_pay]:'未填写'}}
            li
              .name 技能证书：
              .content {{detailInfo && detailInfo.resume_skill_certificate?detailInfo.resume_skill_certificate:'未填写'}}
            li
              .name 户籍：
              .content {{detailInfo && detailInfo.resume_household_register?detailInfo.resume_household_register:'未填写'}}
            li
              .name 婚育：
              .content {{marriageArr[detailInfo.resume_marriage_status]}}
            li
              .name 身高：
              .content {{detailInfo && detailInfo.resume_member_height}}厘米
            li
              .name 体重：
              .content {{detailInfo && detailInfo.resume_member_weight}}公斤
            li
              .name 获奖情况：
              .content {{detailInfo && detailInfo.resume_prize?detailInfo.resume_prize:'未填写'}}
      .re-sec.re-sec-2(v-if="educationInfo && educationInfo.length > 0")
        .sec-title
          i.iconfont.icon-jiaoyujingli
          | 教育经历
        .sec-container
          ul
            li(v-for="(item,index) in educationInfo" :key="index")
              Row.mb-5(type="flex" justify="space-between" align="middle")
                Col.font-20.font-weight {{item.educational_school}}
                Col.font-18 {{item.educational_startdata}} 至 {{item.educational_enddata}}
              Row.text-999(type="flex" justify="space-between" align="middle")
                Col 所学专业：{{item.educational_major}}
      .re-sec.re-sec-3(v-if="workInfo && workInfo.length > 0")
        .sec-title
          i.iconfont.icon-gongzuojingli
          | 工作经历
        .sec-container
          ul
            li(v-for="(item,index) in workInfo" :key="index")
              Row.mb-5(type="flex" justify="space-between" align="middle")
                Col.font-20.font-weight {{item.work_workname}}
                Col.font-18 {{item.work_startdata}} 至 {{item.work_enddata}}
              Row.mb-5.text-999(type="flex" justify="space-between" align="middle")
                Col 职位：{{item.work_position}}
              Row.text-999(type="flex" justify="space-between" align="middle")
                Col 工作内容：{{item.work_content}}
      .go-back
        Button(type="info" @click="goBack") 返回列表
</template>
<script>
import fxzpApi from '@/api/fx-zp.api.js'
export default {
  name: 'resume-detail',
  data () {
    return {
      positionName: '',
      resumeId: '',
      photoImg: '',
      // 基本信息
      detailInfo: {},
      // 教育信息
      educationInfo: null,
      // 工作经历
      workInfo: null,
      // 简历ID
      resumeId: '',
      // 下载路径
      downLoadRul: '',
      workAgeArr: ['无经验', '1年以下', '1年', '2年', '3年', '4年', '5年-10年', '10年-20年', '20年以上'],
      educationArr: ['小学', '初中', '高中', '中专', '大专', '本科', '硕士'],
      workAgeArr: ['无经验', '1年以下', '1年', '2年', '3年', '4年', '5年-10年', '10年-20年', '20年以上'],
      expectPayArr: ['面议', '1000元-2000元', '2000元-3000元', '3000元-4000元', '4000元-5000元', '5000元-6000元', '6000元-7000元', '7000元-8000元', '8000元-9000元', '9000元-10000元', '10000元-15000元', '15000元-20000元', '20000元以上'],
      marriageArr: ['未婚', '已婚未育', '已婚已育', '离异']
    }
  },
  created () {
    this.resumeId = this.$route.query.resumeId
    this.positionName = this.$route.query.positionName
    console.log(this.resumeId)
  },
  mounted () {
    this.getDetail()
  },
  computed: {
    creatortime () {
      let time = '' 
      if (this.detailInfo.creatortime) {
        time = this.detailInfo.creatortime.slice(0, 19).replace(/T/g,' ')
      }
      return time
    },
    labelList () {
      if (this.detailInfo && this.detailInfo.resume_member_label) {
        return this.detailInfo.resume_member_label.split(",")
      } else {
        return []
      }
    }
  },
  methods: {
    getDetail () {
      fxzpApi.GetResume({
        id: this.resumeId
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.detailInfo = res.data.data.data
          console.log(this.detailInfo)
          this.educationInfo = res.data.data.edu
          this.workInfo = res.data.data.work
          if (this.detailInfo.resume_member_photo && this.detailInfo.resume_member_photo != 'null') {
            this.photoImg = 'https://www.fx-zp.com' + this.detailInfo.resume_member_photo
          } else {
            this.photoImg = require('@/assets/images/default_photo1.png')
          }
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
  .resume-detail{
    position: relative;
    background-color: #fff;
    border: 1px solid #dcdee2;
    padding: 0 45px 60px;
    box-shadow: 0 7px 10px rgba(0,0,0,.1);
    border-radius: 6px;
    .go-back{
      position: absolute;
      bottom: 13px;
      left: 50%;
      margin-left: -44px;
    }
  }
  .top-info{
    padding: 15px 0;
    border-bottom: 1px solid #e4e4e4;
    .pull-left{
      // color: @primary_color;
      span{
        color: #333;
      }
    }
    .pull-right{
      color: #999;
      margin-top: 10px;
    }
  }
  .re-sec{
    padding: 0 45px 0px 148px;
    .sec-title{
      width: 100%;
      height: 40px;
      // color: @primary_color;
      font-size: 16px;
      border-bottom: 1px solid #f2f2f2;
      i.iconfont{
        font-size: 18px;
        // color: @primary_color;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .sec-container{
      padding: 24px 0 30px;
    }
  }
  .re-sec-1{
    position: relative;
    .user-img{
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      position: absolute;
      top: 24px;
      left: 0;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .sec-container{
      .debris{
        margin-top: 5px;
        span{
          padding-right: 15px;
          margin-right: 15px;
          position: relative;
          font-size: 16px;
          &:after{
            content: '';
            position: absolute;
            top: 0px;
            right: -1px;
            width: 1px;
            height: 100%;
            background-color: #f2f2f2;
          }
          &:last-child{
            &:after{
              display: none;
            }
          }
        }
      }
      .phone{
        margin-top: 5px;
        i.iconfont{
          font-size: 20px;
          margin-right: 10px;
        }
      }
      .tag{
        margin-top: 30px;
        span{
          display: inline-block;
          font-size: 16px;
          padding: 6px 15px;
          margin-right: 18px;
          border-radius: 5px;
          margin-bottom: 15px;
          &.style-1{
            background-color: #ccf2ff;
          }
          &.style-2{
            background-color: #fff7cc;
          }
          &.style-3{
            background-color: #ffe6cc;
          }
          &.style-4{
            background-color: #eaffcc;
          }
        }
      }
      ul{
        margin-top: 15px;
        li{
          display: flex;
          font-size: 14px;
          margin-bottom: 10px;
          .name{
            min-width: 90px;
            color: #999;
            text-align: right;
            margin-right: 20px;
          }
        }
      }
    }
  }
  .re-sec-2,.re-sec-3{
    .sec-container{
      ul{
        li{
          color: #333;
          margin-bottom: 20px;
        }
      }
    }
  }
  a.mybtn{
    min-width: 120px;
    height: 36px;
    border-radius: 18px;
    font-size: 16px;
    margin-left: 24px;
    margin-bottom: 10px;
    // background-color: @primary_color;
    color: #fff !important;
    text-align: center;
    line-height: 36px;
    &:hover{
      opacity: .8;
    }
  }
</style>


